<template>
  <div class="item-one">
    <div class="Box">
        <!-- 商戶基本信息 -->
      <div class="one" v-show="ones">
        <div class="title">
          <span>商戶信息</span>
          <div>
            <el-button icon="el-icon-refresh"></el-button>
          </div>
        </div>
        <div class="basicBox">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm">
                <el-form-item v-if="userinfo.rolesId !=2 && userinfo.rolesId !=3 && userinfo.rolesId !=4" label="一级服务商:" prop="agent1Id">
                    <el-autocomplete
                        class="service"
                        v-model.trim="ruleForm.agent1"
                        :fetch-suggestions="querySearch"
                        placeholder="请选择一级服务商"
                        @select="serviceid"
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item v-if="userinfo.rolesId !=3 && userinfo.rolesId !=4" label="二级服务商:" prop="agent2Id">
                    <el-autocomplete
                        class="service"
                        v-model.trim="ruleForm.agent2"
                        :fetch-suggestions="querySearch2"
                        placeholder="请选择二级服务商"
                        @select="serviceid2"
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item v-if="userinfo.rolesId !=4" label="业态" prop="bdId">
                    <!-- <el-input placeholder="业态" v-model="ruleForm.bdId"></el-input> -->
                    <el-autocomplete
                        class="service"
                        v-model.trim="ruleForm.BDname"
                        :fetch-suggestions="BDname"
                        placeholder="业态"
                        @select="BDid"
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item label="商户名称" prop="merchantName"><el-input placeholder="商户名称" v-model.trim="ruleForm.merchantName"></el-input></el-form-item>
                <el-form-item label="商户简称" prop="merchantShortName"><el-input placeholder="商户简称" v-model.trim="ruleForm.merchantShortName"></el-input></el-form-item>
                <el-form-item label="商户联系人" prop="contactName"><el-input placeholder="商户联系人" v-model.trim="ruleForm.contactName"></el-input></el-form-item>
                <el-form-item label="负责人电话" prop="contactPhone"><el-input placeholder="负责人电话" v-model.trim="ruleForm.contactPhone"></el-input></el-form-item>
                <el-form-item><el-button type="primary" @click="merchantsave()">确定</el-button></el-form-item>
            </el-form>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import {getservice,getBD,wx1,wx2,wx3,province,parentlist,ratelist,merchantsave} from "@/api/api";
export default {
  name: "baseform",
  data: function() {
    return {
    token: { token: sessionStorage.getItem("token") },
    ones: true,
   
    servicearr1:[],
    servicearr2:[],
    BDarr:[],
  
    ruleForm: {
        agent1Id: '', // 一级服务商
        agent2Id: '', //二级服务商
        bdId: '', // DB
        agent1:'',
        agent2:'',
        BDname:'',
        merchantName:'',
        instNo:'900024',
    },
    
    rules: {
        agent1Id: [{required: true, message: '请选择一级服务商'}],
        agent2Id: [{required: true, message: '请选择二级服务商'}],
        bdId: [{required: true, message: '请选择业态'}],
        merchantName: [{required: true, message: '请输入商户名称', trigger: 'blur'}],
        merchantShortName:[{required: true, message: '请输入商户简称', trigger: 'blur'}],
        contactName:[{required: false, message: '请输入商户联系人', trigger: 'blur'}],
        contactPhone:[{pattern: /^1[3456789]\d{9}$/,required: false, message: '请输入正确电话', trigger: 'blur'}],
    },
      
    };
  },
  created(){
    this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.getservice()
    if(this.userinfo.rolesId == 2){
        this.serviceid(this.userinfo.fid)
    }else if(this.userinfo.rolesId == 3){
        this.ruleForm.agent2Id = this.userinfo.fid
        this.getBD(this.userinfo.fid)
    }else if(this.userinfo.rolesId == 4){
        this.ruleForm.bdId = this.userinfo.fid
    }
  },
  methods: {
        // 根据一级查2级
    serviceid(item){
        this.ruleForm.agent1Id = item.id
        this.servicearr2 =  []
        this.ruleForm.agent2 = '';
        this.ruleForm.BDname = '';
         getservice({
            type: 2,
            parentid:item.id
        }).then(res => {
            console.log(res);
            for (var i = 0; i < res.data.rows.length; i++) {
            this.servicearr2.push({
                value: res.data.rows[i].agentname,
                id: res.data.rows[i].id
            });
            }
        });
        // this.ruleForm.agent1Id = item.id
    },
    // 获取2级
     serviceid2(item){
         this.ruleForm.agent2Id = item.id
          this.ruleForm.BDname = '';
       console.log(item)
        this.getBD(item.id)
    },
     // 业态
    BDname(queryString, cb) {
      let BDarr = this.BDarr;
      let results = queryString
        ? BDarr.filter(this.createFilter(queryString))
        : BDarr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
     // 获取BD
    getBD(id) {
      this.BDarr = [];
      getBD({ agentid: id }).then(res => {
          if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
        console.log(res);
        for (var i = 0; i < res.data.rows.length; i++) {
          this.BDarr.push({
            value: res.data.rows[i].name,
            id: res.data.rows[i].id
          });
        }
      }
      });
    },
    BDid(item) {
        this.ruleForm.bdId = item.id
    },
       // 获取一级服务商
    getservice(){
        getservice({
            type: 1
        }).then(res => {
            console.log(res);
        if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
        }else if (res.code == 200) {
            for (var i = 0; i < res.data.rows.length; i++) {
            this.servicearr1.push({
                value: res.data.rows[i].agentname,
                id: res.data.rows[i].id
            });
            }
        }
        });
    },
     // 一级服务商
    querySearch(queryString, cb) {
      let servicearr = this.servicearr1;
      let results = queryString
        ? servicearr.filter(this.createFilter(queryString))
        : servicearr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
     // 二级服务商
    querySearch2(queryString, cb) {
      let servicearr = this.servicearr2;
      let results = queryString
        ? servicearr.filter(this.createFilter(queryString))
        : servicearr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
     // 新增商户
    merchantsave(){
        var that = this
         merchantsave(this.ruleForm).then(res => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if(res.code == 200) {
            this.$message({
                message: "新增商户成功",
                type: "success"
            });
            this.ruleForm =  {
                   agent1Id: '', // 一级服务商
                    agent2Id: '', //二级服务商
                    bdId: '', // DB
                    agent1:'',
                    agent2:'',
                    BDname:'',
                    merchantName:'',
                    instNo:'900024',
                }
            this.$router.push({
                    path: "/mymerchants",
                });
            setTimeout(function(){that.$router.go(0)},200)
        }else{
            this.$message.error(res.message);
        }
      });
    },
  }
};
</script>
<style scoped lang="less">
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.Box {
  width: 100%;
  background: #fff;
  padding: 10px;
}
.basicBox{
    width: 70%;
    text-align: center;
    margin: 0 auto;
}
.basicBoxs{
     width: 75%;
    text-align: center;
    margin: 0 auto;
}
.width100{
    width: 100%;
}
.block{
    text-align: left;
}

.photo{
    width: 25%;
    display: inline-block;
}
.btnBox{
    width: 100%;
    text-align: center;
}
.service{
    width: 100%;
}
</style>
